<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

    <title>抽奖箱</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="css/lottoryBox.min.css">
</head>
<body>
    <div id="lottoryBox">

			<div class="banner">
				<img src="img/banner.png" alt="">
			</div>

		    <div class="begin text-center">
			    <div class="fz15 chance text-center" >
	                (你还有<span>{{lotteryBox.count}}</span>次召唤机会)
	            </div>
			    <button class="btn btn-now btn-yellow" @click="lotteryBox.getResult()">我要抽奖</button>
		    </div>



        <div class="footer">
            <a href="../common/prize.html">我的奖品</a>
            <span>|</span>
            <a href="../common/rule.html">活动规则</a>
        </div>
        <div class="toast" v-show="lotteryBox.isShow">
            <div class="bg"></div>
            <div class="con text-center">
                <div class="win" v-show="lotteryBox.win" >
                    <div class="prize prize-step2">
	                    <div class="fz22 gongxi">恭喜你! </div>
	                    <p class="prize-name">获得kindle一台</p>
	                    <img class="prize-img" src="../common/img/prize.jpg" alt="" >
	                    <p class="hui666 prize-name">
		                    有效期：2018/03/25-2018/04/25
		                    <br>
							线下门店兑换(当面核销有效)
		                    <br>
							兑换地址：高新区XXXXX
	                    </p>
	                    <a href="../common/getPrize.html" class="btn btn-red" >兑奖</a>
	                    <div class="close">
	                        <i class="iconfont icon-close" @click="lotteryBox.close()"></i>
	                    </div>
                     </div>
                </div>
            </div>
        </div>
	    <div class="lose" v-show="lotteryBox.lose">
            <div class="">未中奖 再接再厉 </div>
        </div>
    </div>

	<script src="../common/js/common.js"></script>
	<script src="../common/lib/vue.min.js"></script>

	<script>
		const lottoryBox = new Vue({
			el: '#lottoryBox',
			data: {
                lotteryBox:lotteryBox  //从公共js获取
			},
		})
	</script>
</body>
</html>